<template>
  <el-container class="main_box">
  <el-header>
    <h1 class="sys_name">动态合同生成系统</h1>
  </el-header>
  <el-container class="main_content">
    <el-aside width="390px">
      <ComponentsDisplay @sendAxis="receiveAxis" @toggleDragState="toggleDragState"/>
    </el-aside>
    <MainContract :type="axis.type" :dragState="dragState"/>
  </el-container>
  <DragObj :axis="axis" v-show="dragState"/>
</el-container>
</template>

<script>
const ComponentsDisplay=()=>import('../components/ComponentsDisplay.vue')
const MainContract=()=>import('../components/MainContract.vue');
const DragObj=()=>import("@/components/DragObj.vue");
  export default {
    components: {
      ComponentsDisplay,
      MainContract,
      DragObj
    },
    data() {
      return {
        axis: {},
        dragState:false,
      }
    },
    methods: {
      receiveAxis(axis) {
        this.axis=axis;
      },
      toggleDragState(val){
        this.dragState=val;
      },
    },
  }
</script>

<style lang="scss" scoped>
.main_box{
  width: 100vw;
  height: 100vh;
  .sys_name{
    text-align: center;
    line-height: 50px;
  }
  .main_content{
    margin-bottom: 10px;
  }
}
</style>